// 显示弹框
// const modalDom = document.querySelector('#modal')
// const modal = new bootstrap.Modal(modalDom)
//渲染用户名
const usernamein= document.querySelector('.username')
usernamein.innerHTML=localStorage.getItem('user')
// 数据增删改查
//渲染业务
const tbody= document.querySelector('tbody')
async function renderStudent(){
  const {data}=await axios.get('/students')
  tbody.innerHTML=data.map(item=>{
    const {age,area,city,createdAt,gender,group,name,hope_salary,salary,province,updateAt,user_id,id}=item
    return `<tr>
             <td>${name}</td>
             <td>${age}</td>
             <td>${gender?'男':'女'}</td>
             <td>第${group}组</td>
             <td>${hope_salary}</td>
             <td>${salary}</td>
             <td>${province}${city}${area}</td>
             <td>
               <a href="javascript:;" class="text-success mr-3" data-id=${id}><i class="bi bi-pen" data-bs-toggle="modal" data-bs-target="#modal"></i></a>
               <a href="javascript:;" class="text-danger" data-id=${id}><i class="bi bi-trash"></i></a>
             </td>
            </tr>`
  }).join('')
}
renderStudent()
//删除业务&编辑业务
const nameInput= document.querySelector('#name')
let userId
tbody.addEventListener('click',async function (e) {
    if(e.target.classList.contains('bi-trash')){
        const id=e.target.parentNode.dataset.id
        axios.delete(`/students/${id}`).then(res=>{
            renderStudent()
            alert('删除成功！')
        })
    }
    if(e.target.classList.contains('bi-pen')){
        userId=e.target.parentNode.dataset.id
      axios.get(`/students/${userId}`).then(res=>{
        for(let k in res.data){
            if(k=='gender'){
                if(res.data[k]==1){
                    cb01.checked='true'
                }else{
                    cb01.checked='false'
                }
            }
            else if(k!='id'&&k!='createdAt'&&k!='user_id'&&k!='updatedAt'&&k!='createdAt'&&k!='city'&&k!='area'&&k!='province'){
                document.querySelector(`[name=${k}]`).value=res.data[k]
            }
        }
        getData_area(res.data['province'],res.data['city'],res.data['area'])
      })
    }
})
//添加业务
const bi_plus= document.querySelector('.bi-plus')
bi_plus.addEventListener('click', function () {
    userId=''
})
//添加和编辑的确定按键
const submit= document.querySelector('#submit')
const form= document.querySelector('form')
const province=document.querySelector('[name=province]')
const city= document.querySelector('[name=city]')
const area= document.querySelector('[name=area]')
//获取地区
async function getData_area(province_p,city_c,area_a) {
    //获取省份
    const {list}=await axios.get(`https://hmajax.itheima.net/api/province`)
    province.innerHTML=`<option value="">--省份--</option>`+list.map(item=>{
        return `<option value=${item}>${item}</option>`
    }).join('')
        if(province_p){
            province.value=province_p
            getCity()
        }
    //获取城市
    async function getCity() {
        const {list:citys}= await axios.get(`https://hmajax.itheima.net/api/city?pname=${province.value}`)
        city.innerHTML=`<option value="">--城市--</option>`+citys.map(item=>{
            return `<option value=${item}>${item}</option>`
        }).join('')
        if(city_c){
            city.value=city_c
            getArea()
        }
    }
    province.addEventListener('change',getCity)
    //获取地区
    async function getArea() {
        const {list:areas}=await axios.get(`https://hmajax.itheima.net/api/area?pname=${province.value}&cname=${city.value}`)
        area.innerHTML=`<option value="">--地区--</option>`+areas.map(item=>{
            return `<option value=${item}>${item}</option>`
        }).join('')
        if(area_a){
            area.value=area_a
        }
    }
    city.addEventListener('click',getArea)
    }

getData_area()
//添加和编辑的确认按钮
const cb01= document.querySelector('#cb01')
submit.addEventListener('click',async function () {
    if(userId){
        const data=serialize(form,{hash:true,empty:true})
        data.group=+data.group
        data.salary=+data.salary
        data.hope_salary=+data.hope_salary
        data.salary=+data.salary
        data.age=+data.age
        data.name=document.querySelector('[name=name]').value
        if(cb01.checked==true){
           data.gender=1
        }else{
           data.gender=0
        }
     axios.put(`/students/${userId}`,data).then(res=>{
        renderStudent()
     })
    }else{
     const data=serialize(form,{hash:true,empty:true})
     data.group=+data.group
     data.salary=+data.salary
     data.hope_salary=+data.hope_salary
     data.salary=+data.salary
     data.age=+data.age
     data.name=document.querySelector('[name=name]').value
     if(cb01.checked==true){
        data.gender=1
     }else{
        data.gender=0
     }
     axios.post(`/students`,data).then(res=>{
        form.reset()
        alert(res.message)
        getData_area()
     })
    }
})